<template>
  <div class="wawwswww">
    <el-card class="dessqw" shadow="never">
      <div class="wdsnwksker">
        <!-- <div>
            <el-input v-model="phone" placeholder="请输入记账标题"></el-input>
          </div> -->
        <!-- <div>
            <el-input
              v-model="registeredUsername"
              placeholder="请输入分类名"
            ></el-input>
          </div> -->

        <!-- <div>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div> -->
        <div class="wdszzfghh">
          <div>
            <el-input
              @keyup.enter.native="djjwksmk"
              @clear="clear"
              clearable
              v-model="fdjsdm.title"
              placeholder="请输入商品标题"
            ></el-input>
          </div>
          <div>
            <el-select
              @clear="clear"
              clearable
              @change="changesr"
              v-model="values"
              placeholder="请选择商品分类名"
            >
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.name"
                :value="{ value: item.id }"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              @clear="clear"
              clearable
              v-model="values"
              @change="changesrss"
              placeholder="请选择商品状态查找"
            >
              <el-option
                v-for="item in options"
                :key="item.status"
                :label="item.label"
                :value="{ value: item.value }"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-button @click="djjwksmk" type="primary" icon="el-icon-search"
              >搜索</el-button
            >
          </div>
        </div>
        <div class="skskwereess">
          <el-button type="success" icon="el-icon-plus" @click="dshwnjs"
            >新增商品</el-button
          >
        </div>
      </div>
      <div class="product-list">
        <el-table
          :data="products"
          stripe
          border
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column label="顺序" width="120">
            <template #default="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品标题"></el-table-column>
          <el-table-column label="商品图片" min-width="120">
            <template #default="{ row }">
              <el-tooltip content="点击预览图片" placement="top">
                <el-image
                  :preview-src-list="[getImge(row.image)]"
                  :src="getImge(row.image)"
                  style="width: 100px; height: 100px"
                ></el-image>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column label="商品详情" prop="description">
            <template #default="{ row }">
              <el-tooltip
                content="点击即可预览查看商品详细全部信息"
                placement="top"
              >
                <div
                  @click="wdwdedeesdd(row)"
                  class="feddxdfrgrdfdd"
                  v-html="row.description || '暂无'"
                ></div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="productAttr" label="商品属性">
            <template #default="{ row }">
              <div
                v-for="(items, index) in JSON.parse(row.productAttr)"
                :key="index"
              >
                {{ items.key }}：
                <el-tag
                  class="dswedewfdd"
                  size="small"
                  type="danger"
                  v-for="(items, index) in items.value"
                  :key="index"
                >
                  {{ items.inputValue }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="金额" prop="price" width="120">
            <template #default="{ row }">
              <p style="color: #f56c6c; font-weight: bold">
                {{ "￥" + row.price.toFixed(2) }}
              </p>
            </template>
          </el-table-column>
          <el-table-column label="商品分类" prop="categoryId" width="150">
            <template #default="{ row }">
              {{ row.categoryId }}
            </template>
          </el-table-column>

          <el-table-column
            prop="store"
            label="商品库存"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="label"
            label="商品标签"
            width="100"
          ></el-table-column>
          <el-table-column label="商品状态" prop="status" width="120">
            <template #default="{ row }">
              <el-tag type="success" v-if="row.status === 1">已上架</el-tag>
              <el-tag type="danger" v-else>已下架</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" prop="updateTime" width="180">
            <template #default="{ row }">
              {{ row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                v-if="scope.row.status == 0"
                size="mini"
                type="warning"
                icon="el-icon-top"
                @click="handleEdits(scope.row)"
                >上架商品</el-button
              >
              <el-button
                v-else
                size="mini"
                type="success"
                icon="el-icon-bottom"
                @click="handleEdits(scope.row)"
                >下架商品</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="wdsdw">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      @close="close"
      :fullscreen="true"
      :title="fsdfsdfd"
      :visible.sync="dialogVisible"
      width="100%"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品标签" >
          <el-input
            v-model="form.label"
            placeholder="请输入商品标签"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="billTypeId">
          <el-select
            @change="change"
            v-model="form.billTypeId"
            placeholder="请选择商品分类"
          >
            <el-option
              v-for="item in tableData"
              :key="item.id"
              :label="item.name"
              :value="{ value: item.id }"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="(distributionLists, indexs) in distributionLists"
          label="商品属性"
          :key="indexs"
          style="margin-top: 20px"
        >
          <div class="dsasdskdc">
            <el-input
              v-model="distributionLists.key"
              class="dasdsddfrr"
              :rows="100"
              style="width: 20%"
              placeholder="请输入商品属性头部"
            ></el-input>

            <div class="sjsjdeerss">
              <el-tag
                type="danger"
                size="small"
                v-model="distributionLists.value"
                :key="index"
                v-for="(tag, index) in distributionLists.value"
                closable
                :disable-transitions="false"
                @close="handleClose(distributionLists, indexs, tag)"
              >
                {{ tag.inputValue }}
              </el-tag>
              <el-input
                v-focus
                class="input-new-tag"
                v-if="distributionLists.inputVisible"
                v-model="distributionLists.inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(distributionLists)"
                @blur="handleInputConfirm(distributionLists)"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput(distributionLists)"
                >+ 请填写商品属性内容</el-button
              >
            </div>
            <el-button
              @click.prevent="removeDistributionList(distributionLists)"
              type="danger"
              style="margin-left: 10px"
              >删除</el-button
            >
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="addDistributionList"
            type="primary"
            style="margin-top: 5px"
            >新增商品属性</el-button
          >
        </el-form-item>
        <el-form-item label="商品状态" width="50" prop="status">
          <el-radio v-model="form.status" label="1">上架商品</el-radio>
          <el-radio v-model="form.status" label="0">下架商品</el-radio>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input-number
            v-model="form.price"
            :precision="2"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品库存" prop="store">
          <el-input-number v-model="form.store" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-upload
            ref="uploads"
            :action="feffeds"
             :show-file-list="false"
            list-type="picture-card"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
          >
            <img v-if="imageSrc" :src="imageSrc" class="avatar" />
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品详情">
          <!-- <quill-editor v-model="form.description"></quill-editor> -->
          <div class="quill-editor">
            <!-- 图片上传组件辅助-->
            <!-- <el-upload
              class="avatar-uploader"
              :action="editorOption.uploadUrl"
              name="file"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
            >
            </el-upload> -->
            <!--富文本编辑器组件-->
            <!-- <quill-editor
              v-model="form.description"
              :content="form.description"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)"
              ref="QuillEditor"
            >
            </quill-editor> -->
            <!-- <div v-html="content" /> -->

            <!-- 上传组件辅助-->
            <el-upload
              class="avatar-uploader-editor"
              :action="serverUrl"
              name="file"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :on-error="uploadError"
            >
            </el-upload>
            <el-upload
              class="avatar-uploader-editor-video"
              :action="serverUrl"
              name="file"
              :show-file-list="false"
              :on-success="uploadSuccessVideo"
              :on-error="uploadError"
            >
            </el-upload>
            <el-upload
              class="avatar-uploader-editor-voice"
              :action="serverUrl"
              name="file"
              :show-file-list="false"
              :on-success="uploadSuccessVoice"
              :on-error="uploadError"
            >
            </el-upload>

            <quill-editor
              class="wdawewererfdd"
              v-model="form.description"
              :content="form.description"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)"
              ref="myQuillEditor"
              style="height: 400px; margin-top: -22px"
              :options="editorOption"
            >
              <div id="toolbar" slot="toolbar">
                <button class="ql-bold" title="加粗">Bold</button>
                <button class="ql-italic" title="斜体">Italic</button>
                <button class="ql-underline" title="下划线">underline</button>
                <button class="ql-strike" title="删除线">strike</button>
                <button class="ql-blockquote" title="引用"></button>
                <button class="ql-code-block" title="代码"></button>
                <button class="ql-header" value="1" title="标题1"></button>
                <button class="ql-header" value="2" title="标题2"></button>
                <button
                  class="ql-list"
                  value="ordered"
                  title="有序列表"
                ></button>
                <button
                  class="ql-list"
                  value="bullet"
                  title="无序列表"
                ></button>
                <select class="ql-header" title="段落格式">
                  <option selected>段落</option>
                  <option value="1">标题1</option>
                  <option value="2">标题2</option>
                  <option value="3">标题3</option>
                  <option value="4">标题4</option>
                  <option value="5">标题5</option>
                  <option value="6">标题6</option>
                </select>
                <select class="ql-size" title="字体大小">
                  <option value="10px">10px</option>
                  <option value="12px">12px</option>
                  <option value="14px">14px</option>
                  <option value="16px" selected>16px</option>
                  <option value="18px">18px</option>
                  <option value="20px">20px</option>
                  <option value="30px">30px</option>
                </select>
                <select class="ql-font" title="字体">
                  <option value="SimSun">宋体</option>
                  <option value="SimHei">黑体</option>
                  <option value="Microsoft-YaHei">微软雅黑</option>
                  <option value="KaiTi">楷体</option>
                  <option value="FangSong">仿宋</option>
                  <option value="Arial">Arial</option>
                </select>
                <select
                  class="ql-color"
                  value="color"
                  title="字体颜色"
                ></select>
                <select
                  class="ql-background"
                  value="background"
                  title="背景颜色"
                ></select>
                <select class="ql-align" value="align" title="对齐"></select>
                <button class="ql-clean" title="清除字体样式"></button>
                <button class="ql-image" title="图片"></button>
                <button class="ql-video" title="视频"></button>
                <button class="ql-audio" title="音频">
                  <i class="el-icon-headset"></i>
                </button>
              </div>
            </quill-editor>
          </div>
        </el-form-item>
        <!-- <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item> -->

        <el-form-item>
          <el-button type="success" @click="onSubmit('form')"
            >立即创建</el-button
          >
          <el-button @click="wdkswk">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 放大处理 -->
    <el-dialog
      :top="5 + 'vh'"
      title="商品详细预览"
      :visible.sync="centerDialogVisible"
      width="90%"
      center
    >
      <div
        @click="centerDialogVisible = false"
        class="feddxdfrgrdfdds"
        v-html="descriptions"
      ></div>
    </el-dialog>
  </div>
</template>

<script>
// 引入富文本编辑器quill和对应的vue组件
import { Quill, quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// const toolbarOptions = [
//   ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
//   ["blockquote", "code-block"], //引用，代码块
//   [{ header: 1 }, { header: 2 }], // 几级标题
//   [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
//   [{ script: "sub" }, { script: "super" }], // 下角标，上角标
//   [{ indent: "-1" }, { indent: "+1" }], // 缩进
//   [{ direction: "rtl" }], // 文字输入方向
//   [{ size: ["small", false, "large", "huge"] }], // 字体大小
//   [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
//   [{ color: [] }, { background: [] }], // 颜色选择
//   [
//     {
//       font: [
//         "SimSun",
//         "SimHei",
//         "Microsoft-YaHei",
//         "KaiTi",
//         "FangSong",
//         "Arial",
//       ],
//     },
//   ], // 字体
//   [{ align: [] }], // 居中
//   ["clean"], // 清除样式,
//   ["link", "image"], // 上传图片、上传视频
// ];
// 自定义字体类型
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
  "宋体",
  "黑体",
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);

//视频标签插入（样式保持宽度100%）
import Video from "./video.js";
Quill.register(Video, true);

//音频标签插入
import Audio from "./audio.js";
Quill.register(Audio, true);

export default {
  name: "AddProduct",
  components: {
    quillEditor,
  },

  directives: {
    //注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.querySelector("input").focus();
      },
    },
  },
  data() {
    return {
      descriptions: "",
      centerDialogVisible: false,
      content: "",
      header: process.env.VUE_APP_IMG + "/attachment/upload",
      editorOption: {
        placeholder: "请输入商品简介（可填写文字和图片结合！）", //文章初始化提示语
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: "#toolbar",
            handlers: {
              image: function (value) {
                if (value) {
                  // 触发input框选择图片文件
                  document
                    .querySelector(".avatar-uploader-editor input")
                    .click();
                } else {
                  this.quill.format("image", false);
                }
              },
              video: function (value) {
                if (value) {
                  // 触发input框选择视频文件
                  document
                    .querySelector(".avatar-uploader-editor-video input")
                    .click();
                } else {
                  this.quill.format("video", false);
                }
              },
              audio: function (value) {
                if (value) {
                  // 触发input框选择音频文件
                  document
                    .querySelector(".avatar-uploader-editor-voice input")
                    .click();
                } else {
                  this.quill.format("audio", false);
                }
              },
            },
          },
        },
      },
      serverUrl:  "http://192.168.0.6:8080/attachment/upload", //上传的图片服务器地址
      options: [
        {
          value: 1,
          label: "已上架",
        },
        {
          value: 0,
          label: "已下架",
        },
      ],
      values: "",
      fdjsdm: {
        title: "",
        remark: "",
        billTypeId: "",
        type: "",
        status: 3,
      },
      fsdfsdfd: "",
      billTypeId: "",
      idsss: "",
      name: "register-modules-example",
      // content: "",
      // editorOption: {
      //   placeholder: "请输入商品简介（可填写文字和图片结合！）",

      //   imageResize: {},
      //   theme: "snow",
      //   modules: {
      //     history: {
      //       delay: 1000,
      //       maxStack: 50,
      //       userOnly: false,
      //     },
      //     toolbar: {
      //       container: toolbarOptions,
      //       handlers: {
      //         image: function (value) {
      //           if (value) {
      //             // 调用element的图片上传组件
      //             document.querySelector(".avatar-uploader input").click();
      //           } else {
      //             this.quill.format("image", false);
      //           }
      //         },
      //       },
      //     },
      //   },
      //   uploadUrl: process.env.VUE_APP_BASE_API + "/attachment/upload", // 服务器上传地址
      // },

      // inputValue: "",
      dynamicTags: ["标签一", "标签二", "标签三"],
      distributionLists: [
        {
          key: "",
          inputValue: "",
          value: [],
          inputVisible: true,
        },
      ],
      imageSrc: "",
      form: {
        name: "",
        status: "1",
        store: 1,
        description: "",
        label: "",
        price: 1,
        billTypeId: "",
        image: "",
      },
      rules: {
        name: [
          { required: true, message: "请添加商品标签！", trigger: "change" },
        ],
        billTypeId: [
          { required: true, message: "请选择商品分类！", trigger: "change" },
        ],
        status: [
          { required: true, message: "请选择商品标签！", trigger: "change" },
        ],
        price: [
          { required: true, message: "请输入商品价格！", trigger: "change" },
        ],
        image: [
          { required: true, message: "请选择商品图片！", trigger: "change" },
        ],
        store: [
          { required: true, message: "请填写商品库存！", trigger: "change" },
        ],
      },
      idsex: "",
      information: "",
      dialogVisible: false,
      currentPage4: 1,
      total: 1,
      feffeds: "",
      page: "1",
      pageSize: "10",
      products: [],
      tableData: [],
      product: {
        title: "",
        category: [],
        price: 0,
        images: [],
        description: "",
      },
    };
  },
  mounted() {
    this.departurEvent();
    this.feffeds = "http://192.168.0.6:8080/attachment/upload";
  },
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "padding-right: 0px;");
  },

  computed: {
    height() {
      return {
        height: window.screen.availHeight,
      };
    },
  },
  methods: {
    wdwdedeesdd(po) {
      console.log(po);
      this.centerDialogVisible = !this.centerDialogVisible;
      this.descriptions = po.description;
    },
    // 富文本图片上传成功
    uploadSuccess(res, file) {
      // console.log(res)

      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res.code == 1) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片res.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", this.getImge(res.data));
        // 调整光标到最后
        quill.setSelection(length + 1);
        // const img = quill.getLeaf(length)[0].domNode;
        // console.log(img);
        // if (img.tagName.toUpperCase() === "IMG") {
        //   img.style.width = "200px";
        //   img.style.height = "200px";
        // }
        // const images = document.querySelectorAll("img");
        // for (const image of images) {
        //   image.style.maxWidth = "200px";
        //   image.style.height = "200px";
        // }
      } else {
        this.$message.error("图片插入失败");
      }
    },
    //上传视频
    uploadSuccessVideo(res, file) {
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res.code == 1) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片res.url为服务器返回的地址
        quill.insertEmbed(length, "video", this.getImge(res.data));
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("视频插入失败");
      }
    },
    //上传音频-处理很重要！！！！
    uploadSuccessVoice(res, file) {
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res.code == 1) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        let BlockEmbed = Quill.import("blots/block/embed");
        let that = this;
        class AudioBlot extends BlockEmbed {
          static create(value) {
            let node = super.create();
            node.setAttribute("src", that.getImge(res.data)); //设置audio的src属性
            node.setAttribute("controls", true); //设置audio的controls，否则他将不会显示
            node.setAttribute("controlsList", "nodownload"); //设置audio的下载功能为不能下载
            node.setAttribute("id", "voice"); //设置一个id
            return node;
          }
        }
        AudioBlot.blotName = "audio";
        AudioBlot.tagName = "audio"; //自定义的标签为audio
        Quill.register(AudioBlot);

        // insertEmbed(index: Number(插入的位置), type: String(标签类型), value: any(参数，将传入到create的方法中去), source: String = 'api')
        quill.insertEmbed(length, "audio", that.getImge(res.data));
        quill.setSelection(length + 1); //光标位置向后移动一位
      } else {
        this.$message.error("音频插入失败");
      }
    },
    // 富文本图片/视频/音频上传失败
    uploadError() {
      this.$message.error("插入失败");
    },

    djjwksmk() {
      // let obj = this.tadPuda.find((item) => item.billTypeName == this.eoewosl);
      // console.log(obj);
      // this.fdjsdm.billTypeId = obj.id;
      this.departurEvents();
    },
    changesr(data) {
      // 将data对象解构
      const { value } = data;
      // this.label = label;
      // this.value = value;
      this.fdjsdm.billTypeId = value;
      // console.log(value);
      this.departurEvents();
    },
    changesrss(data) {
      // 将data对象解构
      console.log(data);
      const { value } = data;
      // this.label = label;
      // this.value = value;
      this.fdjsdm.status = value;
      // console.log(value);
      this.departurEvents();
    },
    clear() {
      this.fdjsdm = {
        title: "",
        remark: "",
        billTypeId: "",
      };
      this.departurEvents();
    },
    handleEdit(ps) {
      console.log(ps);
      console.log(ps);

      const objWithFind = this.tableData.find(
        (obj) => obj.name === ps.categoryId
      );
      let categoryId = objWithFind.id;
      this.billTypeId = categoryId;
      let swws = JSON.parse(ps.productAttr);
      this.distributionLists = swws;
      this.form = {
        name: ps.name,
        status: String(ps.status),
        store: ps.store,
        description: ps.description,
        label: ps.label,
        price: ps.price,
        billTypeId: ps.categoryId,
        image: ps.image,
      };
      this.imageSrc = this.getImge(ps.image);
      if (ps.id) {
        this.fsdfsdfd = "编辑商品";
        this.idsss = ps.id;
      }
      // console.log(res)
      this.$nextTick(() => {
        //    const images = document.querySelectorAll("img");
        // for (const image of images) {
        //   image.style.maxWidth = "200px";
        //   image.style.height = "200px";
        // }
      });

      this.dialogVisible = true;
    },
    // 失去焦点
    onEditorBlur(editor) {},
    // 获得焦点
    onEditorFocus(editor) {},
    // 开始
    onEditorReady(editor) {},
    // 值发生变化
    onEditorChange(editor) {
      this.form.description = editor.html;
      console.log(editor);
    },
    // beforeUpload(file) {},
    // uploadSuccess(res) {
    //   // 获取富文本组件实例
    //   let quill = this.$refs.QuillEditor.quill;
    //   // 如果上传成功
    //   if (res) {
    //     // 获取光标所在位置
    //     let length = quill.getSelection().index;
    //     // 插入图片，res为服务器返回的图片链接地址
    //     quill.insertEmbed(length, "image", this.getImge(res.data));
    //     // 调整光标到最后
    //     quill.setSelection(length + 1);
    //   } else {
    //     // 提示信息，需引入Message
    //     this.$message.error("图片插入失败！");
    //   }
    // },
    // 商品上下架事件
    async handleEdits(gs) {
      const objWithFind = this.tableData.find(
        (obj) => obj.name === gs.categoryId
      );
      let categoryId = objWithFind.id;
      console.log(gs);
      if (gs.status === 1) {
        const arrs = {
          status: 0,
          id: gs.id,
          name: gs.name,

          store: gs.store,
          description: gs.description,
          label: gs.label,
          price: gs.price,
          categoryId: categoryId,
          image: gs.image,
          productAttr: gs.productAttr,
        };
        console.log(gs, "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
        let res = await this.$API.updateGoods(arrs);
        if (res.code === 1) {
          this.departurEvents();
          this.$message({
            message: "恭喜你，更新商品状态成功！",
            type: "success",
          });
        }
      } else {
        const arrs = {
          status: 1,
          id: gs.id,
          name: gs.name,

          store: gs.store,
          description: gs.description,
          label: gs.label,
          price: gs.price,
          categoryId: categoryId,
          image: gs.image,
          productAttr: gs.productAttr,
        };
        console.log(gs, "wwwwwwwwwwwwwwwwwwwwwwwwwwwww");
        let res = await this.$API.updateGoods(arrs);
        if (res.code === 1) {
          this.departurEvents();
          this.$message({
            message: "恭喜你，更新商品状态成功！",
            type: "success",
          });
        }
      }
    },
    // 删除商品
    handleDelete(ids) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$API.deleteGoods(ids);
          if (res.code === 1) {
            this.departurEvents();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.idsss) {
            // const newArr = this.distributionLists.map((item) => {
            //   // 在新的对象中使用对象展开语法 ... 来删除属性
            //   const { inputValue, inputVisible, ...rest } = item;
            //   return rest;
            // });
            let newArrs = JSON.stringify(this.distributionLists);
            const arrs = {
              name: this.form.name,
              id: this.idsss,
              status: Number(this.form.status),
              store: this.form.store,
              description: this.form.description,
              label: this.form.label,
              price: this.form.price,
              categoryId: this.billTypeId,
              image: this.form.image,
              productAttr: newArrs,
              goods_price:0
            };
            console.log(arrs);
            let res = await this.$API.updateGoods(arrs);
            if (res.code === 1) {
              (this.billTypeId = ""), this.departurEvents();
              this.dialogVisible = false;
              this.$message({
                message: "恭喜你，更新商品成功！",
                type: "success",
              });
            }
          } else {
            // const newArr = this.distributionLists.map((item) => {
            //   // 在新的对象中使用对象展开语法 ... 来删除属性
            //   const { inputValue, inputVisible, ...rest } = item;
            //   return rest;
            // });
            // console.log(newArr)
            let newArrs = JSON.stringify(this.distributionLists);
            const arrs = {
              name: this.form.name,
              status: this.form.status,
              store: this.form.store,
              description: this.form.description,
              label: this.form.label,
              price: this.form.price,
              categoryId: this.billTypeId,
              image: this.form.image,
              productAttr: newArrs,
               goods_price:0
            };

            console.log(arrs);
            let res = await this.$API.addGoodsDu(arrs);
            if (res.code === 1) {
              (this.billTypeId = ""), this.departurEvents();
              this.dialogVisible = false;
              this.$message({
                message: "恭喜你，添加商品成功！",
                type: "success",
              });
              this.idsss = "";
            }
          }
        } else {
          this.$message({
            message: "请检查必填项是否填写！",
            type: "warning",
          });
          return false;
        }
      });

      // console.log( JSON.stringify(newArr),'aaaaaaaaa');
    },
    handleClose(tag, indexs, tags) {
      console.log(indexs);
      console.log(tag);
      tag.value.splice(tag.value.indexOf(tags), 1);

      // for (let i = 0; i < arr.length; i++) {
      //   console.log(arr[i]);
      // }
    },

    showInput(tags) {
      tags.inputVisible = true;
      // this.$nextTick((_) => {
      //   // this.$refs.saveTagInput.$refs.input.focus();
      //   const input = this.$refs.saveTagInput
      // input.$el.querySelector('input').focus()
      // });
    },

    handleInputConfirm(tags) {
      let inputValue = tags.inputValue;
      console.log(tags);
      //  console.log(this.inputValue);
      if (inputValue) {
        tags.value.push({
          inputValue:inputValue,
          checked:false
        });
      }
      tags.inputValue = "";
      tags.inputVisible = false;
    },
    // 删除表单
    removeDistributionList(item) {
      var index = this.distributionLists.indexOf(item);
      if (this.distributionLists.length <= 1) {
        this.$message.error(
          "不可全部删除，最少保留一项（商品属性可填写为空！）"
        );
      } else {
        if (index !== -1) {
          this.distributionLists.splice(index, 1);
        }
      }
    },
    // 新增表单
    addDistributionList() {
      //  this.inputValue = false
      this.distributionLists.push({
        value: [],
        key: "",
        inputValue: "",
        inputVisible: false,
      });
    },
    change(data) {
      // 将data对象解构
      const { value, label } = data;
      console.log(value);
      this.billTypeId = value;
      // this.label = label;
      // this.value = value;
      // console.log(value);
      // this.eetaBills();
    },
    wdkswk() {
      this.dialogVisible = !this.dialogVisible;
      // this.form = {
      //   name: "",
      // };
    },
    close() {
      (this.form = {
        name: "",
        status: "1",
        store: 1,
        description: "",
        label: "",
        price: 1,
        billTypeId: "",
        image: "",
      }),
        (this.distributionLists = [
          {
            key: "",
            inputValue: "",
            value: [],
            inputVisible: false,
          },
        ]),
        (this.idsex = "");
      this.$refs.uploads.clearFiles();
    },
    // 下载地址
    getImge(avatar) {
      // console.log(avatar);
      return (
       "http://192.168.0.6:8080/attachment/download?name=" + avatar
      );
    },
    async departurEvent() {
      let params = {
        page: this.page,
        pageSize: "5000",
        // sortField: this.sortField,
        // positiveOrReverse: this.orders,
      };
      let res = await this.$API.getCategoryList(params);
      if (res.code === 1) {
        const { data } = res;

        this.tableData = data.records;
        this.departurEvents();
      }
      // console.log(res);
    },
    async departurEvents() {
      const loading = this.$loading({
        lock: true,
        text: "数据努力加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (this.fdjsdm.status == 1 || this.fdjsdm.status == 0) {
        var sweess = this.fdjsdm.status;
      } else {
        var sweess = "";
      }
      let params = {
        page: this.page,
        pageSize: this.pageSize,
        categoryId: this.fdjsdm.billTypeId,
        name: this.fdjsdm.title,
        status: sweess,
        // sortField: this.sortField,
        // positiveOrReverse: this.orders,
      };
      let res = await this.$API.goodsGetGoodsList(params);
      if (res.code === 1) {
        loading.close();
        const { data } = res;
        this.total = Number(data.total);
        // this.products = data.records;
        //使用map循环
        this.tableData.map((item) => {
          // item.age = false;
          // console.log(item);
          data.records.map((val) => {
            JSON.parse(val.productAttr);
            // console.log(JSON.parse(val.productAttr))
            if (item.id == val.categoryId) {
              val.categoryId = item.name;
              //  item.billTypeName(item.username)
              //  val.billTypeName.push(item.username)
            }
          });
        });
        const er = data.records;
        // console.log(er);
        this.products = er;
      }
      // console.log(res);
    },
    dshwnjs() {
      this.fsdfsdfd = "新增商品";
      this.idsss = "";
      this.dialogVisible = !this.dialogVisible;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.departurEvent();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.departurEvent();
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
      return true;
    },
    handleSuccess(res, file) {
      // this.product.images.push({ url: res.url });
      console.log(res.url);
      // this.form.image =
      //   "https://img.zcool.cn/community/0131e35d1703c6a8012051cddb75f3.jpg@1280w_1l_2o_100sh.jpg";

      // this.ruleForm.avatar = res.data;
      this.form.image = res.data;
      this.imageSrc = this.getImge(res.data);
      console.log(this.imageSrc);
    },
    submit() {
      console.log(this.product);
      // TODO: 发送请求将商品信息保存到后端数据库
      this.$message.success("提交成功");
    },
  },
};
</script>
<style lang="scss" scoped>
.skskwereess {
  padding: 0 20px;
}
.wdszzfghh {
  display: flex;
  justify-content: space-around;
  width: 800px;
}
.sjsjdeerss {
  margin: 0 10px;
  padding: 0px 10px;
  border-radius: 5px;
  border: 1px solid #dde0e6;
}
.dasdsddfrr {
}
.wdawewererfdd img {
  max-width: 200px;
  height: 100px !important;
}
.dsasdskdc {
  display: flex;
  align-items: center;
}
.wdsdw {
  text-align: center;
  margin: 0 auto;
  margin-top: 20px;
}
.dessqw {
  width: 99%;
  padding: 0 20px;
}
.dswedewfdd {
  margin: 3px 5px;
}
.wdsnwksker {
  display: flex;

  margin: 20px 0;
  width: 1000px;
}
.wawwswww {
  padding-right: 0;
}
</style>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  margin-right: 20px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.edit_container {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.ql-editor {
  height: 340px;
}
p {
  margin: 10px;
}

.edit_container,
.quill-editor {
  height: 400px;
  padding-bottom: 50px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;

  box-sizing: 100% 100%;
}
.avatar-uploader {
  position: absolute;
}
.feddxdfrgrdfdd {
  max-height: 150px;
  overflow-y: auto;
}
.feddxdfrgrdfdd img {
  max-width: 100% !important;
  height: auto !important;
}
.el-popup-parent--hidden {
  padding-right: 0 !important;
}
.feddxdfrgrdfdd audio {
  max-width: 100% !important;
}
.feddxdfrgrdfdd video {
  max-width: 100% !important;
  height: auto !important;
}
.feddxdfrgrdfdds {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feddxdfrgrdfdds img {
  max-width: 100% !important;
  height: auto !important;
}

.feddxdfrgrdfdds audio {
  max-width: 100% !important;
  padding: 10px 0 !important;
}
.feddxdfrgrdfdds video {
  max-width: 30% !important;
  height: 30% !important;
}
.avatar-uploader-editor {
  display: inline-block;
}
.avatar-uploader-editor-video {
  display: inline-block;
}
.avatar-uploader-editor-voice {
  display: inline-block;
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  content: "宋体";
  font-family: "SimSun";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  content: "黑体";
  font-family: "SimHei";
}

.ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  content: "楷体";
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
  content: "仿宋";
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial";
  font-family: "Arial";
}

.ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="Times-New-Roman"]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}

.ql-font-SimHei {
  font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
  font-family: "KaiTi";
}

.ql-font-FangSong {
  font-family: "FangSong";
}

.ql-font-Arial {
  font-family: "Arial";
}

.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}

.ql-font-sans-serif {
  font-family: "sans-serif";
}
.wdawewererfdd img {
  max-width: 200px;
  height: 200px !important;
}
</style>
